<template>
  <div ref="container" style="height: 150px;"></div>
</template>

<script lang="ts" setup>
import { Bar } from '@antv/g2plot';
import { onMounted, useTemplateRef, defineProps, watch } from 'vue';

const props = defineProps(['data'])

const cont = useTemplateRef('container')
let bar = null

onMounted(() => {

  bar = new Bar(cont.value, {
    data: props.data,
    xField: 'value',
    yField: 'year',
    seriesField: 'year',
    height: 250,
    legend: {
      position: 'top-left',
    },
  });

  bar.render();
})
watch(() => props.data, () => { console.log(props.data); bar.changeData(props.data) })
</script>
